<template>
  <div id="Brand">
    <div>
      <el-form :inline="true" class="filter-form">
        <el-form-item>
          <el-input
            placeholder="请输入品牌编码、名称"
            v-model="filter.brand"
            clearable
            @keyup.enter="search"
          ></el-input>
        </el-form-item>
        <el-form-item class="action-buttons">
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="primary" @click="handleImport">导入</el-button>
          <el-button type="primary" @click="handleExport">导出</el-button>
          <el-button type="primary" @click="handleEnable">启用</el-button>
          <el-button type="warning" @click="handleDisable">禁用</el-button>
          <el-button type="danger" @click="handleDelete">删除</el-button>
        </el-form-item>
      </el-form>
      <!-- 其他内容... -->
    </div>
    <el-row style="margin-top: 1%" :gutter="20">
      <!-- 左侧 列表 -->
      <el-col
        style="height: 350px"
        :span="span"
        :class="[span != '8' ? 'span1' : 'span1']"
      >
        <div style="position: relative; width: 100%; height: 100%">
          <el-drawer
            class="drawerClass"
            style="position: absolute"
            :append-to-body="false"
            :modal="false"
            :show-close="false"
            :wrapperClosable="false"
            size="100%"
            :visible.sync="drawer"
            direction="ltr"
          >
            <el-card class="box-card" style="position: relative; height: 500px">
              <div>
                品牌分类
                <el-tree
                  :data="treeData"
                  node-key="id"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  ref="tree"
                  style="max-height: 1000px; overflow: auto"
                >
                  <!-- 树节点内容 -->
                  <span slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => append(data)"
                      style="position: relative; left: 100px"
                    >
                      增加
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => edit(data)"
                      style="position: relative; left: 100px"
                    >
                      修改
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => remove(node, data)"
                      style="position: relative; left: 100px"
                    >
                      删除
                    </el-button>
                  </span>
                </el-tree>
              </div>
            </el-card>
          </el-drawer>
          <div
            style="
              position: absolute;
              z-index: 999999999;
              cursor: pointer;
              top: 30%;
              right: 10px;
            "
            :class="[drawer ? 'toggle-text' : 'toggle-text']"
            @click="clickImg"
          >
            <span v-show="!drawer">></span>
            <span v-show="drawer"><</span>
          </div>
        </div>
      </el-col>
      <!-- 右侧 用户列表 -->
      <el-col :span="span1" :class="[span1 != '15' ? 'span1' : 'span1']">
        <el-card class="box-card" style="height: 500px">
          <div>
            品牌分页
            <el-table
              :data="brandList"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="editBrand(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteBrand(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="code"
                label="品牌编号"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="品牌名称"
                width="180"
              ></el-table-column>
              <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注"
                width="180"
              ></el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="100"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Brand",
  data() {
    return {
      filter: {
        brand: "",
      },
      span: 8,
      span1: 15,
      drawer: true,
      brandList: [
        { code: "001", name: "芝水牌", status: true, remarks: "无" },
        { code: "0012", name: "芝水牌", status: true, remarks: "无" },
        { code: "001", name: "芝水牌", status: true, remarks: "无" },
        { code: "001", name: "芝水牌", status: true, remarks: "无" },
        { code: "001", name: "芝水牌", status: true, remarks: "无" },
        { code: "001", name: "芝水牌", status: true, remarks: "无" },

        // 更多品牌...
      ], // 品牌列表数据
      currentPage: 1, // 当前页码
      treeData: [
        {
          id: 1,
          label: "分类1",
          children: [
            {
              id: 2,
              label: "子分类1",
              children: [
                { id: 3, label: "子子分类1" },
                { id: 4, label: "子子分类2" },
              ],
            },
            {
              id: 5,
              label: "子分类2",
              children: [
                { id: 6, label: "子子分类3" },
                { id: 7, label: "子子分类4" },
              ],
            },
          ],
        },
        {
          id: 8,
          label: "分类2",
          children: [
            {
              id: 9,
              label: "子分类3",
              children: [
                { id: 10, label: "子子分类5" },
                { id: 11, label: "子子分类6" },
              ],
            },
            {
              id: 12,
              label: "子分类4",
              children: [
                { id: 13, label: "子子分类7" },
                { id: 14, label: "子子分类8" },
              ],
            },
          ],
        },
      ], // 树状结构数据
      defaultProps: {
        children: "children",
        label: "label",
      },
      handleNodeClick(data) {
        this.selectedCategoryId = data.id;
        this.fetchBrandsByCategory(this.selectedCategoryId);
      },

      fetchBrandsByCategory(categoryId) {
        // 根据分类ID获取品牌列表逻辑
        // 模拟数据
        this.brandList = [
          { date: "2024-01-01", name: "品牌1", address: "地址1" },
          { date: "2024-01-02", name: "品牌2", address: "地址2" },
        ];
      },
      handleSizeChange(val) {
        // 分页大小变化逻辑
      },
      handleCurrentChange(val) {
        // 当前页码变化逻辑
      },
      selectedCategoryId: null, // 选中的品牌分类ID
    };
  },
  methods: {
    clickImg() {
      this.drawer = !this.drawer;
      if (this.drawer) {
        this.span = 8;
        this.span1 = 15;
      } else {
        this.span = 1;
        this.span1 = 23;
      }
    },
  },
};
</script>

<style>
.toggle-text {
  font-size: 16px;
  color: #409eff;
}
.filter-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons .el-button {
  margin-left: 10px;
}
</style>